<template>
  <el-container class="layout-container-demo" style="height: 100%">
    <el-aside width="200px">
      <el-scrollbar style="background-color: #ebedf0">
        <el-menu :default-openeds="['1']" @select="handleSelect">
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Menu /></el-icon>点餐
            </template>
            <el-menu-item-group>
              <template #title>点餐</template>
              <el-menu-item index="1-1">
                <el-icon><ShoppingCart /></el-icon>点餐</el-menu-item
              >
            </el-menu-item-group>

            <el-sub-menu index="1-4">
              <template #title
                ><el-icon><Stopwatch /></el-icon>订单信息</template
              >
              <el-menu-item index="1-4-1"
                ><el-icon><Timer /></el-icon>查看订单信息</el-menu-item
              >
            </el-sub-menu>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <el-icon><ChatDotRound /></el-icon>反馈通道
            </template>
            <el-menu-item-group>
              <template #title>反馈信息</template>
              <el-menu-item index="2-1"
                ><el-icon><MagicStick /></el-icon>即刻反馈</el-menu-item
              >
              <el-menu-item index="2-2"
                ><el-icon><ChatSquare /></el-icon>个人反馈</el-menu-item
              >
              <el-menu-item index="2-3"
                ><el-icon><ChatLineSquare /></el-icon>所有反馈</el-menu-item
              >
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><UserFilled /></el-icon>个人信息
            </template>
            <el-menu-item-group>
              <template #title
                ><el-icon><User /></el-icon>个人信息</template
              >
              <el-menu-item index="3-1"
                ><el-icon><View /></el-icon>查看个人信息</el-menu-item
              >
              <el-menu-item index="3-2"
                ><el-icon><Setting /></el-icon>修改个人信息</el-menu-item
              >
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="4" @click="checkSender">
            <template #title>
              <el-icon><Bicycle /></el-icon>
              配送员
            </template>
            <el-menu-item-group v-if="senderFlag">
              <template #title>在线接单</template>
              <el-menu-item index="4-1"
                ><el-icon><List /></el-icon>所有订单</el-menu-item
              >
              <el-menu-item index="4-2"
                ><el-icon><Memo /></el-icon>接单信息</el-menu-item
              >
            </el-menu-item-group>
            <el-menu-item-group title="配送员审核">
              <el-menu-item index="4-3"
                ><el-icon><Promotion /></el-icon>配送员资格</el-menu-item
              >
            </el-menu-item-group>
            <!-- <el-sub-menu index="4-4" v-show="senderFlag">
              <template #title>消息</template>
              <el-menu-item index="4-4-1"
                ><el-icon><Document /></el-icon>消息通知</el-menu-item
              >
            </el-sub-menu> -->
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px; background-color: #fff">
        <div class="toolbar">
          <el-dropdown>
            <el-icon style="margin-right: 8px; margin-top: 1px"><setting /></el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="LoginOut">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span class="right_title">{{ userInfo.username }}</span>
        </div>
      </el-header>

      <el-main>
        <el-scrollbar>
          <router-view />
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import router from "../../router/index";
import axios from "axios";
import { ElMessage } from "element-plus";
const token = ref(localStorage.getItem("student_auth_token"));

interface UserInfo {
  name: string;
  inputTime: string;
  phone: string;
  sex: string;
  username: string;
  img: string;
  role: string;
}
const senderFlag = ref(false);

const userInfo = reactive<UserInfo>({
  name: "",
  inputTime: "2024-03-29 17:39:03",
  phone: "",
  sex: "",
  username: "",
  img: "",
  role: "",
});

const handleSelect = (key: string, keyPath: string[]) => {
  //console.log(key, keyPath);
  if (key == "0") router.push("/manager/index");
  if (key == "1-1") {
    router.push("/manager/order/tackOut");
  } else if (key == "1-2") {
    router.push("/manager/order/dineInOrder");
  } else if (key == "1-4-1") {
    router.push("/manager/order/viewInformation");
  } else if (key == "2-1") {
    router.push("/manager/feedback/provide");
  } else if (key == "2-2") {
    router.push("/manager/feedback/personal");
  } else if (key == "2-3") {
    router.push("/manager/feedback/all");
  } else if (key == "3-1") {
    router.push("/manager/person/view");
  } else if (key == "3-2") {
    router.push("/manager/person/set");
  } else if (key == "3-3") {
    router.push("/manager/person/notify");
  } else if (key === "3-4") {
    router.push("/manager/person/setAddress");
  } else if (key == "4-1") {
    router.push("/manager/sender/allOrder");
  } else if (key == "4-2") {
    router.push("/manager/sender/orderInfo");
  } else if (key == "4-3") {
    router.push("/manager/sender/qualification");
  } else if (key == "4-4-1") {
    router.push("/manager/sender/message");
  }
};

const LoginOut = () => {
  localStorage.removeItem("student_auth_token");
  ElMessage({
    type: "success",
    message: "退出登录成功",
  });
  router.push("/");
};

const getUserInfo = () => {
  axios
    .get("/api/auth/userinfo", {
      headers: {
        token: token.value,
      },
    })
    .then((res) => {
      // console.log("code line-179 \n\r😋 res:\n\r", res);
      const msg = res.data.message;
      if (msg.img) userInfo.img = msg.img;
      if (msg.name) userInfo.name = msg.name;
      if (msg.phone) userInfo.phone = msg.phone;
      if (msg.sex) userInfo.sex = msg.sex;
      userInfo.role = msg.role;
      userInfo.username = msg.username;
      userInfo.inputTime = msg.inputTime;
    })
    .catch((err) => {});
};
getUserInfo();
const checkAuth = () => {
  axios
    .get("/api/auth/student/student_sender/check", {
      headers: {
        token: token.value,
      },
    })
    .then((res) => {
      // console.log("code line-177 \n\r😃 res:\n\r", res);
      if (res.data.success) {
        localStorage.setItem("student_auth_token", res.data.message);
      } else {
        router.push("/auth/login");
        ElMessage({
          type: "error",
          message: "登录已失效",
        });
      }
    })
    .catch((err) => {
      console.log("code line-189 \n\r😏 err:\n\r", err);
    });
};

checkAuth();
setInterval(checkAuth, 60000);

const checkSender = () => {
  axios
    .get("/api/auth/student_sender/check", {
      headers: {
        token: token.value,
      },
    })
    .then((res) => {
      // console.log("code line-206 \n\r😕 res:\n\r", res);
      if (res.data.success) {
        senderFlag.value = true;
      } else {
        senderFlag.value = false;
      }
    })
    .catch((err) => {});
};
checkSender();
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.right_title {
  font-size: 15px;
}
</style>
